<template>

  <div class="pro_info">
    <el-table 
      :data="tableData"
      style="width:50%; text-align:center; scrollbar-always-on"
      border
      @row-click="handleRead"
      :row-class-name="tableRowClassName"
    >
      <el-table-column   align="center"
        v-for="(item, i) in tableCol"
        :key="i"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script  setup lang="ts" name="form">
import { useRoute, useRouter } from "vue-router";
import { ref, reactive } from "vue";

const route = useRoute();

const tableData = reactive([
  { id: "1", name: "电厂1", code: "1号", status: "关门" },
  { id: "2", name: "电厂1", code: "2号", status: "关门" },
  { id: "3", name: "电厂1", code: "3号", status: "关门" },
  { id: "4", name: "电厂1", code: "4号", status: "开门" },
  { id: "5", name: "电厂1", code: "5号", status: "关门" },
  { id: "6", name: "电厂1", code: "6号", status: "关门" },
  { id: "7", name: "电厂1", code: "7号", status: "关门" },
  { id: "8", name: "电厂1", code: "8号", status: "开门" },
  { id: "9", name: "电厂1", code: "9号", status: "关门" },
  { id: "10", name: "电厂1", code: "10号", status: "关门" },
  { id: "11", name: "电厂1", code: "11号", status: "关门" },
  { id: "12", name: "电厂1", code: "12号", status: "关门" },
  { id: "13", name: "电厂1", code: "13号", status: "开门" },
  { id: "14", name: "电厂1", code: "14号", status: "关门" },
  { id: "15", name: "电厂1", code: "15号", status: "关门" },
  { id: "16", name: "电厂1", code: "16号", status: "关门" },
  { id: "17", name: "电厂1", code: "17号", status: "关门" },
  { id: "18", name: "电厂1", code: "18号", status: "关门" },
  { id: "19", name: "电厂1", code: "19号", status: "关门" },
  { id: "20", name: "电厂1", code: "20号", status: "开门" },
  { id: "21", name: "电厂1", code: "21号", status: "关门" },
  
]);
const params = new URLSearchParams(window.location.search);
const id = params.get('id'); // 获取id参数的值
const status = params.get('status'); // 获取status参数的值
const tableCol = reactive([
  // { prop: "id", label: "id", width: 80 },
  { prop: "name", label: "厂区", width: 180 },
  { prop: "code", label: "设备名称", width: 200 ,},
  { prop: "status", label: "设备状态" },
]);
// const change = (any route) =>{

// }
const router = useRouter();

const handleRead = (row:any) => {
  router.push({
    name: "company",
    query: {
     id:row.id,
     state:row.state,
     cq:1
    },
  });
};
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: any
  rowIndex: number
}) => {
  console.log(row.status)
   if (row.status === '开门') {
    return 'warning-row'
   } 
   return ''
}
</script>
<style lang="css" scoped>
.pro_info {
  text-align: center;
  overflow: auto;
}

::v-deep.el-table .warning-row {
  width: 100%; 
  text-align: center;
  --el-table-tr-bg-color: var(--el-color-error-light-3);
}
::v-deep.el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: rgba(0, 0, 0, 0) !important;
  }
</style>